<template>
  <div>
    <div class="content">
      <div v-show="mask === 'toTop' " class="toTop">
        <el-radio v-model="toTopRadio" label="1">置顶</el-radio>
        <el-radio v-model="toTopRadio" label="2">取消置顶</el-radio>
      </div>
      <div v-show="mask === 'jingPin' " class="jingpin">
        <el-radio v-model="jingPinRadio" label="3">设置精品</el-radio>
        <el-radio v-model="jingPinRadio" label="4">取消精品</el-radio>
      </div>
      <div v-show="mask === 'isClose' " class="close">
        <el-radio v-model="topicCloseRadio" label="1">关闭话题</el-radio>
        <el-radio v-model="topicCloseRadio" label="2">启用话题</el-radio>
      </div>
      <div
        v-show="mask === 'isTopicDelete' || mask === 'shutUp' || mask === 'isCommentDelete'"
        class="deleteOrShutUp"
      >
        <div class="selectButton">
          <el-select v-model="value" @change="selectValue">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="textareaButton">
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
      </div>
    </div>
    <div class="elButton">
      <el-button @click.stop="handleCancle">取消</el-button>
      <el-button @click.stop="handleConfirm">确定</el-button>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  props: ['mask', 'topicData', 'opraId'],
  data() {
    return {
      toTopRadio: '1',
      textarea: '',
      data: '',
      jingPinRadio: '3',
      topicCloseRadio: '1',
      value: '1'
    };
  },
  methods: {
    selectValue(val) {
      this.value = val;
    },
    handleConfirm() {
      let tipMessage = [
        '当前状态已经是置顶',
        '已经取消置顶',
        '当前已是精品',
        '已经取消精品',
        '话题已经被关闭',
        '话题已经被启用'
      ];
      let urlObj = {
        toTop: '/ibs/web/bbs/batchTagManage', // 批量标签设置操作 1批量置顶、2取消置顶、3设置精品、4取消精品
        shutUp: '/ibs/web/bbs/forbiddenComment', // 禁言评论人
        delete: '/ibs/web/bbs/batchTopicManage', // 话题启用， 关闭， 话题删除
        commentDelete: '/ibs/web/bbs/batchReplyManage' // 评论删除， 还原
      };
      let url = '';
      let data = '';
      let id = this.opraId;
      let selectVal = this.value;
      let desc = this.textarea;
      let jingPinRadio = this.jingPinRadio;
      let toTopRadio = this.toTopRadio;
      let topicCloseRadio = this.topicCloseRadio;
      console.log(this.topicDataMsg,'dsdsdds');
      let currentTag = this.topicDataMsg.priority;
      let showTip = this.showTip;
      let dataArr = {
        batchReplyManage: {
          // 评论删除还原
          actionType: 1, // 1批量删除、2批量还原 ,boolean
          commentIdList: [id.id],
          deleteReasonType: selectVal,
          deleteReasonDesc: desc
        },
        batchTagManage: {
          // 置顶，精品等标签管理；
          tagType: '', // "string" // 1批量置顶、2取消置顶、3设置精品、4取消精品 ,
          topicIdList: [id.id]
        },
        batchTopicManage: {
          // 话题管理操作
          actionType: '', // 1批量关闭 2批量启用 3批量删除 4批量还原 , string
          deleteReasonDesc: desc,
          deleteReasonType: selectVal, //  string 1.广告 2.恶意灌水 3.违规内容 4.文不对题 5.重复发帖 6.自定义 - web删除必填 ,
          topicInfoList: [
            {
              id: id.id,
              version: id.version
            }
          ]
        },
        forbiddenComment: {
          // 禁言评论人
          reasonDesc: this.textarea,
          reasonType: selectVal, // "1.广告 2.恶意灌水 3.违规内容 4.机器人 5.自定义",
          userId: id.userId
        }
      };
      let mask = this.mask;
      if (mask === 'toTop' || mask === 'jingPin') {
        // 置顶和精品请求的路径和params的data
        url = urlObj['toTop'];
        data = dataArr['batchTagManage'];
        if (this.mask === 'toTop') {
          if (currentTag === 2 && showTip(tipMessage[0])) {
            console.log('tpppp');
            this.handleCancle();
            return;
          }
          if (currentTag === 0 && showTip(tipMessage[1])) {
            this.handleCancle();
            return;
          }
          data.tagType = toTopRadio;
        } else {
          // 是否重复设置精品取消精品提示；
          if (currentTag === 1 && showTip(tipMessage[2])) {
            this.handleCancle();
            return;
          }
          if (currentTag === 0 && showTip(tipMessage[3])) {
            this.handleCancle();
            return;
          }
          data.tagType = jingPinRadio;
        }
      } else if (mask === 'isClose' || mask === 'isTopicDelete') {
        // 关闭话题和话题删除的请求的路径和params的data
        let currentClose = this.topicData.isClosed;
        // let currentDelete = this.topicData.isDeleted;
        url = urlObj['delete'];
        data = dataArr['batchTopicManage'];
        if (mask === 'isClose') {
          // 是否重复关闭话题提示；
          let closeStatus = !currentClose ? showTip(tipMessage[5]) : showTip(tipMessage[4]);
          if (closeStatus) {
            this.handleCancle();
            return;
          }
          data.actionType = topicCloseRadio;
        } else {
          data.actionType = '3';
        }
      } else if (mask === 'shutUp') {
        // 评论用户禁言的请求的路径和params的data
        url = urlObj['shutUp'];
        data = dataArr['forbiddenComment'];
      } else if (mask === 'isCommentDelete') {
        // 评论删除的请求的路径和params的data
        url = urlObj['commentDelete'];
        data = dataArr['batchReplyManage'];
      }
      let _this = this;


      this.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
            // _this.$store.dispatch('topicDetail', { data: { id: id.id }, _this, cb: callback.successCallBack });
          }, 300);
          if (res.code === 200) {
            // 操作时更新数据，若是关闭话题，则在推出话题详情弹窗；
            // _this.$store.dispatch('getResStatus', res)
            if (mask === 'isClose' || mask === 'isTopicDelete') {
              _this.$store.dispatch('closeDetail');
              // 在这里要做一个话题列表的更新；
            }
            this.successCallBack({data: { id: id.id }});
          } else {
            this.errorTip(res.message);
          }
        }
      });
      this.handleCancle();
    },
    handleCancle() {
      this.$emit('on-close');
    },
    showTip (msg) {
      this.infoTip(msg);
      return true;
    },
    successCallBack (data) {
      this.ajax({
        type: 'POST',
        url: '/ibs/web/bbs/detail',
        data: data,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            _this.$store.dispatch('paginationStore', res.result);
          } else {
            this.errorTip(res.message);
          }
        }
      });
    }
  },
  computed: {
    ...mapState(['paginationData']),
    topicDataMsg () {
      if (this.paginationData) {
        return this.paginationData.topicData;
      };
    },
    options() {
      let optionsArr = [
        {
          value: '1',
          label: '广告'
        },
        {
          value: '2',
          label: '恶意灌水'
        },
        {
          value: '3',
          label: '违规内容'
        },
        {
          value: '4',
          label: '文不对题'
        },
        {
          value: '5',
          label: '重复发帖'
        },
        {
          value: '6',
          label: '自定义'
        }
      ];
      let mapArr = optionsArr.slice();
      if (this.mask === 'isTopicDelete') {
        return mapArr;
      } else if (this.mask === 'isCommentDelete') {
        mapArr[4].label = '重复评论';
        return mapArr;
      } else if (this.mask === 'shutUp') {
        mapArr.splice(3, 2, {value: '4', label: '机器人'});
        mapArr[4].value = '5';
        return mapArr;
      };
    }
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.content {
  .toTop,
  .jingpin,
  .close {
    margin-bottom: 30px;
  }
  .deleteOrShutUp {
    .selectButton {
      margin-bottom: 20px;
    }
    .textareaButton {
      margin-bottom: 20px;
    }
  }
}
.elButton {
  width: 200px;
  display: flex;
  justify-content: space-between;
}
</style>
